<template>
    <div >
        <van-tabs  :active="active" color="#1989fa" @change="onchange" sticky swipeable line-width="20%"
            offset-top="50px">
           <van-tab v-for="tab in tabData" :title="tab.columnName" :key="tab.id">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :active="active">
            <van-list id="todoList" v-model="loading" :finished="finished"
                finished-text="没有更多数据" @load="onLoad" :immediate-check="false"
                style="margin-bottom: 50px;">
                <van-cell v-for="item in list" :key="item.id" @click="todetail(item.id,item.isVideo)">
                    <!-- <div v-show ="hasImageOrVideo(item.videoFiles)" class="image" >  
                        <img :src="getImgPath(item.videoFiles[0].anonymousFilePath)">  
                    </div> -->
                    <div>
                        <div class="titlefont" v-html="item.title"></div>
                        <div style="display:flex;">
                            <div style="width:70%; display: flex; align-items: center;" > 
                                <img :src="require('@/assets/images/film_16.png')"  style="margin-right: 10px;"/>
                                <span style="color: gray;">{{ item.playNum }} </span>
                                <img :src="require('@/assets/images/comment_16.png')" style="margin-left: 10px; margin-right: 10px;"/>
                                <span style="color: gray;">{{ item.commentNum }} </span>
                            </div>
                            <div style="width: 30%; text-align:right" > {{ timeUtil(item.createdTime) }}</div>
                        </div>
                    </div>
                </van-cell>
                <div v-show="list.length == 0" class="text-c">
                    <img width="100px" height="100px" :src="require('@/assets/images/pic_nodata.png')" alt="暂无数据"
                        style="margin: 120px 50px 0" @click="onRefresh" />
                </div>

                <div v-show="showErrorPic" class="text-c">
                    <img width="100px" height="100px" :src="require('@/assets/images/pic_neterror.png')"
                        alt="获取数据失败" style="margin: 120px 50px 0" @click="onRefresh" />
                    <div class="color-b font14" style="margin: 20px 0 0 15px">
                        获取数据失败!
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
        
            </van-tab>
        </van-tabs>
        
    </div>
</template>
<script>
import { myTaskToDo} from "@/api/appApi";
import { Toast } from "vant";
import { Notify } from "vant";
import { mapGetters } from "vuex";
import moment from 'moment'

export default {
    data() {
        return {
            active: 0,
            list: [],
            refreshing: false,
            loading: false,
            finished: false,
            todoErromessage: '',
            showErrorPic: false,
            pageIndex:1,
            tabData:[],
            searchTxt:'',
            maxpagetodo:50
        }
    },
    computed: {
        ...mapGetters(["user"]),
        ...mapGetters(["userinfo"])
    },
    
    methods: {
        hasImageOrVideo(files){
            if(files.length==0) return false;
            let fileType = files[0].fileType;
            return fileType == 'png' || fileType == 'jpg' || fileType == 'mp4';
        },
        getImgPath(url){
            return '/' + url.split('/').slice(3).join('/');
        },
        setTabData(tabData){
            this.tabData=tabData;
            let bb=localStorage.getItem('tabactiveNumberFdzl');
            if(bb){
                this.active=JSON.parse(bb);
            } 
            this.onRefresh();
        },
        setSearchKey(searchTxt){
            this.searchTxt=searchTxt;
            this.onRefresh();
        },
        //查询
        onRefresh() {
            console.log("调用onRefresh");
            this.refreshing = true;
            this.pageIndex=1;
            this.maxpagetodo=50;
            this.finished = false;
            this.showErrorPic = false;
            this.list = [];
            this.onLoad();
        },
        onLoad() {
            let current = this.tabData[this.active];
            if (typeof(current) == "undefined") return;
            if (this.pageIndex <= this.maxpagetodo) {
                this.finished = false;
                this.loading = true;
                myTaskToDo({ "source": "MOBILE", "page": this.pageIndex,  "size": 50 },
                           { "videoClassificationId": current.id, "videocolumnid": current.videoColumnId,  "keyWords": this.searchTxt })
                    .then((result) => {
                        this.loading = false;
                        if (!result.data) {
                            if (this.refreshing){
                                this.showErrorPic=true;
                                this.todoErromessage = result.message;
                                this.refreshing=false;
                            }else{
                                Notify({ type: 'warning', message: result.message })
                            }
                            return;res
                        }
                        this.refreshing=false;
                        this.maxpagetodo = result.data.data.totalPages;
                        if (result.data.data.content) {
                            this.list = this.list.concat(result.data.data.content);
                        }
                        this.pageIndex++;
                    })
                    .catch((error) => {
                        this.loading = false
                        if (this.refreshing){
                            this.showErrorPic=true;
                            this.todoErromessage = '获取数据失败,请稍后重试';
                            this.refreshing=false;
                        }else{
                            Notify({ type: 'warning', message: '获取数据失败,请稍后重试' })
                        }
                    });
            } else {
                this.loading = false
                this.finished = true;
                this.refreshing=false;
            }
        },
        timeUtil(value) {
            return moment(value).format('YYYY-MM-DD');
        },
        onchange(name,title) {
            this.active=name;
            localStorage.setItem('tabactiveNumberFdzl', name);
            this.searchTxt = '';
            this.pageIndex=1;
            this.onRefresh()
        },

        todetail(id,isVideo) {
            this.$router.push( {name: 'detail',query: {id: id,isVideo:isVideo}});
        }

    }
}
</script>
<style scoped>
.btn {
    margin-bottom: 60px;
    margin-top: 60px;
}


.custom-image .van-empty__image {
    width: 90px;
    height: 90px;
}

/* .image {
    width: 90px;
    height: 60px;
    display: flex;  
    align-items: center;  
    justify-content: center;  
} */
</style>